<!--
 * @Author: your name
 * @Date: 2020-10-13 10:23:54
 * @LastEditTime: 2020-12-22 14:57:17
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \inventory-apie:\hjimi\人脸\html\face-recognition\src\views\faceManagement\index.vue
-->
<style lang="less" scoped>
/deep/.el-page-header {
    margin-bottom: 16px;
  .el-page-header__left::after {
    display: none;
  }
  .el-page-header__left:hover {
    .el-icon-back,
    .el-page-header__title {
      color: #409eff;
    }
  }
}
/deep/.el-loading-spinner i {
    font-size: 22px;
}
.tag {
  span:nth-child(2) {
    margin-left: 15px;
  }
  margin-bottom: 16px;
}
.imgUrl {
    width: 135px;
    height: 150px;
    overflow: hidden;
    img {width: 100%;}
    display: flex;
    margin:0 auto;
    align-items: center;
    position: relative;
    .el-icon-loading {
      font-size: 30px;
      position: absolute;
      left: 50%;
      margin-left: -20px;

    }
}
#faceUploadBtn {
  background: #67C23A;
  border-color: #67C23A;
}
</style>
<template>
  <div>
    <div class="faceList" v-if="status.faceList" v-loading="deleteImgLoding" element-loading-text="拼命删除中..."  element-loading-spinner="el-icon-loading">
    <el-page-header title="返回脸库" @back="goBack"></el-page-header>
      <el-form :model="pagingParams" :inline="true">
        <el-form-item label="图像标识"><el-input v-model.trim="pagingParams.imageIds" placeholder="图像标识" style="width: 343px"></el-input></el-form-item>
        <el-form-item label="脸库编码"> <el-input v-model.trim="pagingParams.libraryCode" placeholder="脸库编码" style="width: 160px"></el-input></el-form-item>
        <el-form-item label="时间节点">
          <el-date-picker
            v-model="image_date"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="创建日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            :default-time="['00:00:00', '23:59:59']"
            @change="changeDate"
          >
        </el-date-picker>
      </el-form-item>
        <el-button type="primary" @click.prevent="onSearch" class="search"><i class="el-icon-search"></i> <span>查询</span></el-button>
         <el-button type="primary" @click.prevent="resetSearch" class="search"><i class="el-icon-refresh"></i> <span>重置</span></el-button>
        <el-button type="primary" @click="onDelete"><i class="el-icon-delete"></i><span>批量删除</span></el-button>
        <el-button type="primary" @click="goUpload" id="faceUploadBtn"><i class="el-icon-upload2"></i><span>人脸上传</span></el-button>
      </el-form>
      <div class="tag">
        <el-tag type="info">脸库编码：{{ pagingParams.libraryCode }}</el-tag>
        <el-tag type="info">人脸数量： {{ pagingParams.total }}</el-tag>
      </div>
      <el-table :data="tableData" border @selection-change="handleSelectionChange" v-loading="table_loading" ref="multipleTable" max-height="650">
        <template slot="empty"><i class="iconfont icon-kong"></i>暂无数据</template>
        <el-table-column width="50" type="selection" align="center" fixed></el-table-column>
        <el-table-column label="序列" width="60" align="center"><template slot-scope="scope">{{ (scope.$index + pagingParams.size * (pagingParams.current - 1)) + 1 }}</template></el-table-column>
        <el-table-column label="人脸ID" width="80" prop="id" align="center"><template v-slot="scope"> <div> {{ scope.row.id }} </div> </template></el-table-column>
         <el-table-column label="图像标识" width="350" prop="imageId" align="center"><template v-slot="scope"> <div> {{ scope.row.imageIds }} </div> </template></el-table-column>
         <el-table-column label="人脸图片" width="160" prop="imageUrl" align="center">
              <template v-slot="scope"><div class="imgUrl"><i class="el-icon-loading" v-if="imgLoadIcon"></i><img :src="tableData[scope.$index].imageUrl"></div></template></el-table-column>
        <!-- <el-table-column label="姓名" width="200" prop="username" align="center"></el-table-column> -->
        <el-table-column label="性别" width="100" prop="gender" align="center"></el-table-column>
        <el-table-column label="年龄" width="100" prop="age" align="center"></el-table-column>
        <el-table-column label="图像类型" width="100" prop="imageType" align="center"></el-table-column>
         <el-table-column label="质量评估结果" width="110" prop="quality" align="center"></el-table-column>
         <el-table-column label="脸框位置" width="150" prop="faceRect" align="center"></el-table-column>
         <el-table-column label="入库时间" width="180" prop="createTime" align="center"></el-table-column>
        <el-table-column label="操作" fixed="right">
          <template v-slot="scope"> 
            <!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" >编辑</el-button > -->
            <el-popconfirm confirmButtonText="确认" cancelButtonText="取消" title="确定要永久删除该人脸吗？" @onConfirm="handleDelete(scope.$index, scope.row)" style="margin-left: 5px">
              <el-button size="mini" type="danger" slot="reference" @click="deleteTip_handler(scope.$index, scope.row)">删除</el-button >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagingParams['current']"
        :page-sizes="pageSizes"
        :page-size="pagingParams['size']"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagingParams['total']"
      ></el-pagination>
    </div>
    <!-- 脸库列表 -->
    <faceLibrayList v-if="status.faceLibrary" />
  </div>
</template>
<script>
import faceLibrayList from "./faceLibraryList"
// import { paginationHandle } from '@/utils/bugHandle'
import {
  getFaceImage,     //获取单张人脸
  attribute,        //人脸属性（年龄性别）
  deleteFaceImage,  //删除单张人脸
  getLibraryimage,  //查询脸库图片
   } from "@/api/faceManagement"
import { getImages } from '@/api/public'
import moment from "moment"
import { pickerOptions } from '@/utils'
export default {
  name: "faceManagement",
  components: {
    faceLibrayList,
  },
  data() {
    return {
      table_loading: false,
      image_loading: true,
      deleteImgLoding: false,
      imgLoadIcon: true,
      status: {
        faceList: false,
        faceLibrary: true,
      },

// 日期
      pickerOptions: pickerOptions(),
      image_date: '',
      tableData: [],
      multipleSelection: [], //多选删除
      
// 分页
      pagingParams: {
        // imageIds: '',
        libraryCode: '',
        // milvusRecordIds:'',  //算法库中的图像记录标识
        // displayName: "",
        // imageTypes:'',
        // storageType: '',  //入库类型。image(图片)/feature(特征)
        // createTimeFrom: '',
        // createTimeTo: '',
        // age: '',
        // gender:'',
        // current: 1, 
         size: 20
        //  total: 0
      },
      pageSizes: [20, 40, 60, 80],
      deleteTip: "",
      deleteColTip: "",
    }
  },
    watch: {
    $route: {
      handler(val, oldVal) {
      let _this = this,
          pageName = this.$route.name
     pageName === 'faceLibraryList' || pageName ==='faceManagement' ? autoGetFaceImage() : null
      function autoGetFaceImage() {
       _this.pageStatus()
       _this.pagingParams.libraryCode = _this.$route.query.libraryCode
       _this.getFacerList()
      }
      },
    }
  },
  methods: {
      goBack() {
          this.$router.go(-1)
    },
    resetSearch() {
    let _p = this.pagingParams
       _p.imageIds = _p.libraryCode = _p.createTimeTo = _p.createTimeFrom = null 
       _p.total = 0
       this.image_date = null
       this.getFacerList()
    },
     changeDate() {
      let date = this.image_date,
          _d = this.pagingParams
      date && date.length
        ? ((_d['createTimeFrom'] = moment(date[0]).format("YYYY-MM-DD")),
          (_d['createTimeTo'] = moment(date[1]).format("YYYY-MM-DD")))
        :  _d['createTimeFrom'] = _d.createTimeTo = null
    },
    goUpload() {
      this.status.faceLibrary = false
      this.status.faceList = true
      this.$router.push(
        { 
          name:'faceManagement',
          path: "./faceManagement",
          params: {
            faceUpload: true
          },
          // query: {
          //   show: 1
          // }
           }
        )
    },
// ----------------------------控制脸库页和人脸显示-----------------
    pageStatus() {
      let _this = this
      function _h(x, y) {
        return _this.$set(_this.status, x, y)
      }
      this.$route.query.show
        ? (_h("faceLibrary", false), _h("faceList", true))
        : (_h("faceLibrary", true), _h("faceList", false))
    },
// ----------------------------查询--------------------------------
    onSearch() {
      let params = this.pagingParams
          params.current = 1
      this.getFacerList()
    },
// ---------------------------获取人脸列表--------------------------
    getFacerList() {
      let params = this.pagingParams
      getLibraryimage(params).then((res) => {
        if(res.code === 0) {
           this.tableData = []
             params.total = res.data.total
             params.current = res.data.current
           if(res.data.records.length !== 0 && Array.isArray(res.data.records)) {
              this.table_loading = true
              this.imgLoadIcon = true
             res.data.records.map((item, index) => {
             attribute(// 获取人脸属性（年龄性别）
                 {
                 datas: 'age_gender',
                 imageId: item.imageId,
                 libraryCode: params['libraryCode']
                 }).then((res1) => {
                 if(res1.code === 0) {
                    this.tableData.push({
                      createTime: item.createTime.replace('T',' '),
                      faceRect: item.faceRect,  
                      id: item.id,
                      imageIds: item.imageId,  
                      imageType: item.imageType,  
                      imageUrl: getImages(item.imageUrl),
                      quality: item.quality,
                      age: res1.data.age,
                      gender: res1.data.gender === 'female' ? '女' : '男'
                    })
                    if(index >= res.data.records.length - 1) {
                      this.imgLoadIcon = false
                    }
                     this.table_loading = false
              } else {
               this.table_loading = false
            }
            })
             })
             
           } else {
             this.table_loading = false
           }
          } else {
               this.table_loading = false
            }
       }) 
    },
 
 // ------------------------------删除单张人脸-----------------------
    deleteTip_handler(x, y) {
        // this.deleteTip = "确定要永久删除该人脸吗？"
        // this.deleteColTip = "rgb(255, 153, 0)"
    },
    handleDelete(x, y) {
      let params = this.pagingParams
      this.deleteImgLoding = true
      deleteFaceImage(
        {
          libraryCode: params['libraryCode'],
          imageId: y['imageIds'] 
        }
        ).then((res) => {
        if (res.code == 0 && res.data === null) {
            this.$message.success("删除成功")
            this.getFacerList()
              this.deleteImgLoding = false
        } else{
            this.deleteImgLoding = false
        }
      })
    },
// ---------------------------------批量删除人脸-----------------------
    onDelete() {
      if (this.multipleSelection.length !== 0) {
        this.$confirm("此操作将永久删除已选人脸, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
            this.deleteImgLoding = true
            for (let i = 0; i < this.multipleSelection.length; i++) {
              deleteFaceImage({
                libraryCode: this.pagingParams.libraryCode,
                imageId: this.multipleSelection[i].imageIds
              }).then((res) => {
                if (res.code === 0 && res.data === null) {
                      if(i + 1 >= this.multipleSelection.length) {
                        this.$message.success("删除成功")
                        this.onSearch()
                        this.deleteImgLoding = false
                  }
                } else {
                    this.deleteImgLoding = false
                }
              })
            }
          }).catch(() => {
             this.$message.info("已取消删除")
            this.$refs.multipleTable.clearSelection()
          })
      } else {
        this.$message.warning("请勾选要删除的人脸")
      }
    },
 // 编辑
    // handleEdit(index, row) {
    //   console.log(index, row)
    // },
    
// 分页
    handleSizeChange(val) {
      let pagingParams = this.pagingParams
          pagingParams.size = val
      if(pagingParams.current * pagingParams.size > pagingParams.total) {} else {
        this.getFacerList()
      }
    },
    handleCurrentChange(val) {
        this.pagingParams.current = val
        this.getFacerList()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
  },
   created() {
       this.getFacerList()
   },
  mounted() {
   this.pagingParams.libraryCode = this.$route.query.libraryCode
    this.$nextTick(() => {
    this.pageStatus()
    })
  }
}
</script>
 